Deteksi Jari Tangan Real-Time Menggunakan MediaPipe, JavaScript & Tailwind CSS

Deteksi Jari Tangan Real-Time Menggunakan MediaPipe, JavaScript & Tailwind CSS

By. Iyon Manakarra // Mekatronika Manakarra

Perkembangan teknologi Artificial Intelligence (AI) dan Computer Vision saat ini sudah semakin pesat. Menariknya, kita tidak lagi harus selalu bergantung pada bahasa pemrograman Python atau server berdaya tinggi hanya untuk menjalankan model AI.

Lewat artikel ini, kita akan belajar cara membuat aplikasi Pendeteksi Jari Tangan Real-Time yang modern, interaktif, dan berjalan langsung di browser web hanya dengan modal HTML, Tailwind CSS, JavaScript, dan pustaka AI buatan Google bernama MediaPipe.

Subscribe "MEKATRONIKA MANAKARRA"

Fitur Utama Aplikasi

1. Deteksi Real-Time Berbasis AI: Menggunakan pustaka MediaPipe Hands buatan Google.

2. Detail Status Per Jari: Menampilkan status spesifik (Ibu Jari, Telunjuk, Tengah, Manis, Kelingking) apakah sedang Terangkat atau Tertutup.

3. Deteksi Sisi Tangan: Otomatis mengenali apakah tangan yang tampil adalah tangan Kanan atau Kiri.

4. Indikator FPS & Toggle Kamera: Dilengkapi penghitung FPS real-time dan tombol ON/OFF kamera.

5. Tampilan Modern & Responsif: Menggunakan antarmuka tema gelap (dark mode) berbasi Tailwind CSS.

Apa itu MediaPipe dan JavaScript?

Sebelum masuk ke teknis pembuatan, mari kita pahami dua komponen utama yang membuat proyek ini bekerja:

• MediaPipe (Google): Framework pembelajaran mesin (machine learning) buatan Google yang dirancang khusus untuk memproses data visual secara cepat (real-time). Pustaka ini mampu memetakan 21 titik koordinat landmark pada tangan manusia.

• JavaScript & HTML: Kombinasi bahasa pemrograman web yang bertugas mengakses kamera pengguna, mengirimkan cuplikan video ke MediaPipe, menghitung logika jari mana yang terbuka, dan memperbarui tampilan UI secara dinamis.

Bagaimanakah Sistem Menghitung Jari?

MediaPipe membaca tangan dan memberinya 21 titik koordinat (X, Y, Z).

Logika perhitungan pada kode ini bekerja sebagai berikut:

• 4 Jari Utama (Telunjuk, Tengah, Manis, Kelingking): Membandingkan koordinat Y antara ujung jari (tip) dengan sendi di bawahnya (PIP). Jika koordinat Y ujung jari lebih kecil (posisi di layar lebih tinggi), maka jari dianggap Terangkat.

• Ibu Jari (Thumb): Menggunakan perbandingan horizontal (koordinat X) yang disesuaikan dengan posisi Tangan Kanan atau Tangan Kiri (Handedness).

Kode Program Lengkap

Kamu bisa membuat satu berkas bernama index.html dan memasukkan seluruh kode di bawah ini:

== Link Download "Klik disini" ==

Cara Menjalankan Proyek

1. Simpan File: Buat berkas baru di komputer kamu, beri nama index.html, lalu tempelkan kode di atas.

2. Buka di Browser: Klik dua kali berkas index.html tersebut untuk membukanya di browser (Chrome, Edge, atau Firefox).

3. Izinkan Akses Kamera: Ketika muncul jendela pop-up pemberitahuan dari browser, pilih Allow / Izinkan untuk memberi akses kamera web.

4. 
   
   
   

5. Uji Coba: Arahkan tangan kamu ke kamera dan cobalah menekuk atau membuka jari-jarimu!

Kesimpulan

Dengan mengombinasikan MediaPipe dan JavaScript, kita bisa membangun aplikasi Hand Tracking interaktif langsung di browser tanpa perlu instalasi perangkat lunak atau server backend yang rumit. Proyek ini sangat cocok dijadikan dasar untuk pengembangan aplikasi lain, seperti game berbasis gestur tangan, navigasi web bebas sentuhan (touchless interface), atau pengenal bahasa isyarat.